import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import {AuthRoute,GoPagePush} from '../../../assets/js/utils';
import {ActionSheet,Toast} from 'antd-mobile';
import Css from '../../../assets/css/user/profile/index.css';
import request from "../../../assets/js/utils/request";

class profilComponent extends React.Component{
    constructor(props){
        super(props);
        AuthRoute(props);
        this.state={
            aGender:'',
            aDataGender:0,
            aNickName:'',
            aHeadImg:require('../../../assets/images/commen/head.png'),
            aDataHeadImg:''
        }
    }
    componentDidMount(){
        this.getDataProfile()
    }
    //修改昵称
    getEName(e){
        this.setState({aNickName:e.target.value})
    }
    //点击选择性别
    selectGender(){
        const BUTTONS = ['男', '女','取消'];
        ActionSheet.showActionSheetWithOptions({
                options: BUTTONS,
                cancelButtonIndex: BUTTONS.length - 1,
                //destructiveButtonIndex: BUTTONS.length - 2,
                title: '选择性别',
                //message: 'I am description, description, description',
                maskClosable: true,
                'data-seed': 'logId',
                onTouchStart: e => e.preventDefault(),
            },
            (buttonIndex) => {
                if (buttonIndex!==2){
                    this.setState({
                        aGender: buttonIndex===0?'男':buttonIndex===1?'女':this.state.aGender,
                        aDataGender:buttonIndex===0?'1':buttonIndex===1?'2':this.state.aDataGender
                    });
                }
            });
    }
    //获取个人信息
    getDataProfile(){
        let sUrl=window.base.config.baseUrl+'/user/myinfo/userinfo/uid/'+this.props.state.redLogin.uid+'?token='+window.base.config.token;
        request(sUrl,'get').then(res=>{
            if (res.code===200) {
                this.setState({
                    aNickName:res.data.nickname,
                    aGender:res.data.gender==='1'?'男':res.data.gender==='2'?'女':this.state.aGender,
                    aDataGender:res.data.gender,
                    aHeadImg:res.data.head?res.data.head:this.state.aHeadImg,
                })
            }
        })
    }
    //修改上传头像
    upLoadHead(){
        console.log(this.refs['changeImg'].files[0])
        let sUel=window.base.config.baseUrl+'/user/myinfo/formdatahead?token='+window.base.config.token;
        request(sUel,'file',{headfile:this.refs['changeImg'].files[0]}).then(res=>{
            if(res.code===200){
                this.setState({
                    aHeadImg:'http://vueshop.glbuys.com/userfiles/head/'+res.data.msbox,
                    aDataHeadImg:res.data.msbox
                })

            }
        })
    }
    //保存
    sumbit(){
        if (this.state.aNickName.match(/^\s*$/)) {
            Toast.info('请输入昵称',2);
            return false;
        }
        if (this.state.aGender.match(/^\s*$/)) {
            Toast.info('请选择性别',2);
            return false;
        }
        let sUrl=window.base.config.baseUrl+'/user/myinfo/updateuser?token='+window.base.config.token;
        let data={
            uid:this.props.state.redLogin.uid,
            nickname:this.state.aNickName,
            gender:this.state.aDataGender,
            head:this.state.aDataHeadImg
        }
        request(sUrl,'post',data).then(res=>{
            if(res.code===200){
                Toast.info(res.data,2,()=>{
                    GoPagePush(this.props,'home/user')
                });

            }else {
                Toast.info(res.data,2);
            }
        })
    }
    //解决内存泄漏
    componentWillUnmount(){
        this.setState=(state,callback)=>{
            return ;
        }
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'个人资料'} headBtn={'保存'}  onClick={this.sumbit.bind(this)}> </HeadNavComponent>
                <div className={Css['grop']+" "+Css['h120']}>
                    <div className={Css['row']}>头像</div>
                    <div className={Css['row']}>
                        <div className={Css['profile_img']}>
                            <img src={this.state.aHeadImg} alt=''/>
                            <input type='file' ref='changeImg'  onChange={this.upLoadHead.bind(this)} />
                        </div>
                    </div>
                </div>
                <div className={Css['grop']}>
                    <div className={Css['row']}>昵称</div>
                    <div className={Css['row']}>
                        <input type='text' placeholder='请设置昵称' value={this.state.aNickName} onChange={this.getEName.bind(this)}/>
                    </div>
                </div>
                <div className={Css['grop']}>
                    <div className={Css['row']}>性别</div>
                    <div className={Css['row']}>
                        <input type='text' placeholder='请选择性别' readOnly value={this.state.aGender}  onClick={this.selectGender.bind(this)}/>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(profilComponent)